<template>
  <div class="first">
    <div class="font1">实时游客统计</div>
    <div class="font2"></div>
    <div class="font3">
      可预约总量
      <span style="color: yellow">50000</span>
      人
    </div>
    <div class="ps">
      <p v-for="(item, index) in people" :key="index">{{ item }}</p>
    </div>
    <div class="water" ref="water"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import 'echarts-liquidfill'
import * as echarts from 'echarts'
let people = ref('20000')
let water = ref()
onMounted(() => {
  let myEcharts = echarts.init(water.value)
  const series = [
    {
      type: 'liquidFill',
      shape: 'circle',
      radius: '90%',
      center: ['50%', '50%'],
      data: [0.6, 0.5, 0.4],
      // 球体配置
      outline: {
        borderDistance: 0,
        itemStyle: {
          borderWidth: 2,
          borderColor: '#3dfff6',
          shadowBlur: 20,
          shadowColor: '#12786f',
        },
      },
      color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
      backgroundStyle: {
        color: 'transparent',
      },

      label: {
        show: true,
        textStyle: {
          color: '#12786f',
          insideColor: '#12786f',
          fontSize: 28,
        },
      },
      label: {
        show: true,
        textStyle: {
          color: '#12786f',
          insideColor: '#12786f',
          fontSize: 40,
        },
        formatter: (params) => {
          return `40%\n {a|百分比}`
        },
        rich: {
          a: {
            fontSize: 24,
          },
        },
      },
    },
  ]
  myEcharts.setOption({ series: series })
})
</script>
<style scoped lang="scss">
.first {
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: cover;

  .font1 {
    margin-top: 10px;
    color: white;
    font-size: 20px;
  }

  .font2 {
    margin-top: 10px;
    width: 68px;
    height: 7px;
    background: url(../../images/dataScreen-title.png) no-repeat;
    background-size: cover;
  }

  .font3 {
    float: right;
    color: white;
    font-size: 20px;
  }

  .ps {
    margin-top: 50px;
    display: flex;
    justify-content: center;

    p {
      width: 50px;
      height: 50px;
      font-size: 30px;
      margin-left: 20px;
      background: url(../../images/total.png);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .water {
    width: 200px;
    height: 200px;
    margin-left: 170px;
  }
}
</style>
